<template>
  <el-dialog :visible.sync="dialogVisible"
             @close="handleCancel"
             @open="getPaidUserListByMusicScoreId"
             :title="dialogTitle">
    <!-- 对话框内容 -->
    <el-input placeholder="请搜索用户"
              style="width:80%;"
              @change="SearchUsers"
              v-model="content">
      <i slot="prefix"
         class="el-input__icon el-icon-search"></i>
    </el-input>
    <el-table :data="userList"
              border
              max-height="80%"
              :default-sort="{prop: 'date', order: 'descending'}"
              style="width: 100%;margin-top:20px">
      <el-table-column label="购买日期"
                       sortable
                       width="180">
        <template slot-scope="scope">
          <svg-icon icon-class="date"></svg-icon>
          <span style="margin-left: 10px">{{ scope.row.paid_time|formatDate }}</span>
        </template>
      </el-table-column>
      <el-table-column label="姓名"
                       width="80">
        <template slot-scope="scope">
          <span>{{ scope.row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="邮箱">
        <template slot-scope="scope">
          <span>{{ scope.row.email }}</span>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination small
                   :page-size="limit"
                   @current-change="pageChange"
                   layout="prev, pager, next"
                   :total="count">
    </el-pagination>
    <div slot="footer"
         class="dialog-footer">
      <!-- 自定义确定按钮的事件 -->
      <el-button @click="handleCancel">关闭</el-button>
    </div>
  </el-dialog>
</template>

<script>
export default {
  components: {
  },
  props: {
    dialogTitle: {
      type: String, // 对话框标题
      default: '编辑'
    },
    visible: {
      type: Boolean,
      required: true
    },
    musicScoreId: {
      type: Number,
    }
  },
  data () {
    return {
      dialogVisible: false,
      departmentId: null,
      music_score_id: null,
      limit: 5,
      page: 1,
      count: 0,
      userList: []
    };
  },
  watch: {
    // 数据替换
    visible: {
      immediate: true,
      handler (val) {
        this.dialogVisible = val
        // // 获取用户列表

      }
    },
    musicScoreId: {
      handler (val) {
        this.music_score_id = val
        if (val)
          this.getPaidUserListByMusicScoreId()
      }
    }
  },
  methods: {
    // 获取已支付用户名单
    async getPaidUserListByMusicScoreId () {
      const { limit, page } = this
      const res = await this.$API.pay.getPaidUserListByMusicScoreId(this.music_score_id, limit, page)
      if (res.status == 200) {
        this.userList = res.data.payload
        this.count = res.data.count
      }
    },
    // 关闭事件回调
    handleCancel () {

      this.dialogVisible = false;
      this.departmentId = null

      this.$emit("custom-close")
    },
  }
};
</script>

<style scoped>
.dialog-footer {
  text-align: right;
  margin-top: 20px;
}
</style>
